<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--简单数据渲染-->
    <h1>{{ msg }}</h1>
    <br>
    <!--对象渲染-->
    <h3>{{obj.name}}</h3>
    <br>
    <!--数组渲染-->
    <ul>
      <li v-for="item in list" :key="item">
          {{item}}
      </li>
    </ul>
    <br>
    <!--渲染数组中的对象-->
    <!-- <ul>
      <li v-for="item in list1" :key="item">
          {{item.title}}
      </li>
    </ul> -->
    <!--渲染对象中数组中的对象-->
    <br>
    <!-- <ul>
      <li v-for="item in list2" :key="item">
         {{item.cate}}
         <ol>
           <li v-for="category in item.list" :key="category">
             {{category.title}}
           </li>
         </ol>
      </li>
    </ul> -->
    <br>
    <!--绑定属性-->
    <div v-bind:title="title">鼠标瞄上去看一下</div>
    <img src="https://www.itying.com/themes/itying/images/logo.gif" />

    <br>
    <br>
    <!--图片的绑定-->
    <img v-bind:src="url"/>
     <br>
     <br>
    <img :src="url" />
    <br>
    <br>
    <!--绑定html-->
    <div v-html="h">
        
    </div>
    <br>
    <!--绑定数据的另一种方法-->
    <div v-text="msg"></div>
    <br>
  <!--v-bind:class   :class的使用-->
  <div v-bind:class="{'red':flag}">
    我是一个div
  </div>
  <br>
  <br>
  <div v-bind:class="{'red':flag,'blue':!flag}">
    我是另一个div
  </div>
  <br>
  <br>
  <!--循环数据，第一个数据高亮-->
  <ul>
    <li v-for="(item, key) in list" :key="key">
      {{key}}---{{item}}
    </li>
  </ul>
  <br>
  <br>
  <ul>
    <li v-for="(item, key) in list" :key="key" :class="{'red':key==0,'blue':key==1}">
      {{key}}---{{item}}
    </li>
  </ul>
  <br>
  <br>
  <!--v-bind:style  :style的使用-->
  <div class="box" v-bind:style="{'width':boxWdith+'%'}">
    style属性的应用
  </div>
  <br>
  <br>

  <input type="text"/>

  <button @click="getMsg()">获取表单里面的数据get</button>

  <button @click="setMsg()">设置表单的数据set</button>
  <br>
  <br>
  <hr>
  <br>
  <br>
  <input ref="userinfo" type="text"/>
  <br>
  <br>
  <div ref="box1">我是一个box</div>
  <br>
  <br>
  <!-- <button @click="getInputValue()">获取第二个表单里面的数据</button> -->


   <button v-on:click="run1()">执行方法的第一种写法</button>
    <br><br><br>

    <button @click="run2()">执行方法的第二种写法</button>

    <br>
    <br>
    <br>
     <button @click="requestData()">请求数据</button>
     <br>
     <br>
     <br>
     <button @click="deleteData('1111')">执行方法传值1111</button>
      <br><br><br>

       <button @click="deleteData('2222')">执行方法传值2222</button>
      <br><br><br>
       <button data-aid='123' @click="eventFn($event)">事件对象</button>
      <br><br><br>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {

    return {
      //绑定的数据
      msg: 'Vue 学习历程',
      //对象
      obj:{
        name:"Hedy"
      },
      //数组
      list:['傻逼','大傻逼','小傻逼'],
      list1:[
        {'title':'小龙虾'},
        {'title':'鸡腿'},
        {'title':'汉堡'},
        {'title':'蜜汁鸡'},
      ],
      list2:[
        {
          "cate":"小南国",
          "list":[
            {'title':'麻辣小火锅'},
            {'title':'麻辣香锅'},
          ]
        },
         {
          "cate":"蜀得道",
          "list":[
            {'title':'鸳鸯锅'},
            {'title':'自助凉粉'},
          ]
        },
         {
          "cate":"香格里拉",
          "list":[
            {'title':'香辣蟹'},
            {'title':'海鲜锅'},
          ]
        },
      ],
      //显示标题的
      title:'我是一个title',

      url:'https://www.itying.com/themes/itying/images/logo.gif',
      h:'<h2>我是H2</h2>',
      flag:false,
      boxWdith:100
    }
  },
  methods:{
    run1:function(){
      console.log("这是一个方法");  
    },
    run2(){
      console.log("这是另一个方法")
    },
    //写方法
    getMsg(){
      //alert('这是对的');
      //获取data里面的数据
      alert(this.msg);
    },
    setMsg(){
      this.msg = "我是改变后的数据"
    },
    // getInputValve(){
    //   //获取ref定义的dom节点
    //   // console.log(this.$refs.userInfo);
    //   // this.$refs.box1.style.background='red';
    //   // alert(this.$refs.userInfo.value);
    // }
    requestData(){
      for(var i=0;i<10;i++){
        //list里面的数据
        this.list.push('我是第'+i+'条数据');
      }
    },
    deleteData(val){
      alert(val);
    },
    eventFn(e){
      console.log(e);
       // e.srcElement  dom节点
       e.srcElement.style.background = 'red';

      //获取自定义的属性值
       console.log(e.srcElement.dataset.aid);
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
.red{
  color: red;
}
.blue{
  color: blue;
}
.box{
  height: 100px;
  width: 100px;
  background: red;
}
</style>
